<template>
  <div class="navControl">
    <div v-for="(item,index) in NavControlData"
      :key="index"
      class="navControlItem"
      @click="clickItem(index)">
      <span :class="(currentIndex==index)?'isSelected':''">{{item}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      currentIndex:0
    }
  },
  props:{
    NavControlData:Array,
  },
  methods:{
    clickItem(index){
      this.currentIndex = index
      this.$emit('navClick',index)
    }
  }
}
</script>
<style scoped>
.navControl{
  display: flex;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  background-color: #fff;
  z-index: 5;
  position: relative;
}
.navControlItem{
  flex:1;
}
.navControlItem span{
  padding: 5px;
}
.navControlItem span.isSelected{
  color: rgb(255, 145, 144);
  border-bottom: 2px solid rgb(255, 145, 144);
}
</style>